<template>
  <div class="">
    <!-- 顶部通用 -->
    <headMain :mensid="'00'" ref="head" />
    <div class="imessagesmian beautifulScroll">
      <div class="imessagesmiantiltebox">
        <div class="imessagesmiantilte">消息通知</div>
        <div class="imessagesmiantilte2" @click="ReadAll">全部标记为已读</div>
      </div>
      <a-table
        row-key="msgNoticeId"
        v-model:selectedKeys="msgNoticeIds"
        :loading="loading"
        page-position="bottom"
        :columns="columns"
        :data="renderData"
        :pagination="pagination"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
        :show-header="false"
        :bordered="false"
        class="zddiv"
      >
        <template #option="{ record }">
          <div class="imessagesitembox">
            <div class="imessagesitemicon">
              <div
                class="imessagesitemiconstatus"
                v-if="record.readStatus == 0"
              ></div>
              <img src="@/assets/images/imessagesitemicon.png" alt="" />
            </div>
            <div class="imessagesitemdesbox">
              <div class="imessagesitemdestitle">
                <div class="">{{ record.title }}</div>
                <div class="imessagesitemdestitle1">{{
                  formatDate(record.createTime)
                }}</div>
              </div>
              <div
                class="imessagesitemdesmain"
                v-if="showid != record.msgNoticeId"
              >
                {{ record.content }}
              </div>
              <div
                class="imessagesitemdesmains"
                v-if="showid == record.msgNoticeId && show"
              >
                <!-- <textarea disabled class="beautifulScroll">{{
                  record.content
                }}</textarea> -->
                <textarea
                  disabled
                  class="beautifulScroll auto-resize"
                  :value="record.content"
                  readonly
                  ref="textareaRefs"
                  @input="autoResize($event)"
                />
                <!-- {{ record.content }} -->
              </div>
            </div>
            <div class="imessagesitemoptionbox">
              <div
                class="imessagexq"
                @click="goxq(record)"
                v-if="!show || showid != record.msgNoticeId"
                >详情 <img src="@/assets/images/chevron-down.png" alt=""
              /></div>
              <div
                class="imessagexq imessagexqs"
                @click="goxqs(record)"
                v-if="show && showid == record.msgNoticeId"
                >详情 <img src="@/assets/images/chevron-down.png" alt=""
              /></div>
              <div
                class="imessagexq"
                v-if="record.readStatus == 0"
                @click="noticeReadfn(record.msgNoticeId)"
                >标记为已读</div
              >
              <div class="imessagexdel" v-else>标记为已读</div>
              <div class="imessagexdel tool" @click="del(record.msgNoticeId)"
                >删除

                <img src="@/assets/images/delete.png" alt="" class="normal" />
                <img src="@/assets/images/deleteac.png" alt="" class="active" />
              </div>
            </div>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import headMain from '@/views/headmain/index.vue';
  import {
    noticeList,
    noticeDel,
    noticeRead,
    noticeReadAll,
  } from '@/api/tplist';
  import { computed, nextTick, reactive, ref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import useUser from '@/hooks/user';
  import { storeToRefs } from 'pinia';
  import { useUserStore } from '@/store';
  import useLoading from '@/hooks/loading';
  import { Pagination } from '@/types/global';
  import { Message, TableColumnData } from '@arco-design/web-vue';
  const { loading, setLoading } = useLoading(true);
  const userStore = useUserStore();
  const userdata = storeToRefs(userStore);
  const studentdata = ref(userdata);

  // 测试
  //   定义相关参数
  const basePagination: Pagination = {
    current: 1,
    pageSize: 6,
    total: 0,
  };
  const pagination = reactive({
    ...basePagination,
    'hide-on-single-page': true,
    'show-total': true,
    'show-jumper': true,
    'show-page-size': true,
    'page-size-options': [6, 12, 18, 24],
  });
  const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
  };
  const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    fetchData();
  };
  const renderData = ref([]);

  const fetchData = async () => {
    setLoading(true);
    try {
      const data = {
        pageNum: pagination.current,
        ...pagination,
        studentId: studentdata.value.studentId,
      };
      noticeList(data).then((res: any) => {
        if (res.code == 200) {
          renderData.value = res.data.list;
          pagination.total = res.data.total;
          pagination.current = res.data.pageNum;
        }
      });
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };
  fetchData();
  const columns = computed<TableColumnData[]>(() => [
    {
      title: '功能',
      slotName: 'option',
    },
  ]);
  const msgNoticeIds = ref([]);
  const formatDate = (dateStr) => {
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };

  //   删除通知
  const del = (id) => {
    noticeDel({
      msgNoticeId: id,
    }).then((res: any) => {
      if (res.code == 200) {
        Message.success('删除成功！');
        fetchData();
      }
    });
  };
  //   标记已读 单个
  const noticeReadfn = (id) => {
    noticeRead({
      msgNoticeId: id,
    }).then((res: any) => {
      if (res.code == 200) {
        Message.success('已读！');
        head.value?.fetchData();
        fetchData();
      }
    });
  };
  const head = ref();
  //   全部标记已读
  const ReadAll = () => {
    noticeReadAll({
      studentId: studentdata.value.studentId,
    }).then((res: any) => {
      if (res.code == 200) {
        Message.success('全部标记为已读！');
        head.value?.fetchData();
        fetchData();
      }
    });
  };
  const showid = ref(0);
  const show = ref(false);
  //   详情
  const goxq = (item) => {
    showid.value = item.msgNoticeId;
    if (item.msgNoticeId != 0) {
      show.value = true;
    } else {
      show.value = false;
    }
    if (item.readStatus != 1) {
      noticeReadfn(item.msgNoticeId);
    }
  };

  const goxqs = (item) => {
    show.value = !show.value;
    showid.value = 0;
    if (item.readStatus != 1) {
      noticeReadfn(item.msgNoticeId);
    }
  };

  // 测试

  const textareaRefs = ref(null);

  // 自动高度函数
  const autoResize = (e) => {
    const el = e.target;
    el.style.height = 'auto'; // 先清空高度，防止内容减少时无法收缩
    el.style.height = el.scrollHeight + 'px'; // 设置成内容高度
  };

  // 当记录切换时自动更新高度
  watch(
    () => showid.value,
    async () => {
      await nextTick(); // 等待 textarea 渲染完成
      const el = textareaRefs.value;
      if (el) {
        el.style.height = 'auto';
        el.style.height = el.scrollHeight + 'px';
      }
    }
  );
</script>

<style scoped>
  .imessagesmian {
    width: 1777px;
    height: 834px;
    background: #e8ebee;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #a3b0c1;
    position: absolute;
    top: 75px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 999;
    overflow-y: auto;
  }
  .imessagesmian {
    padding: 15px 30px;
  }
  .imessagesmiantiltebox {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
  }
  .imessagesmiantilte {
    font-size: 20px;
    color: #000000;
  }
  .imessagesmiantilte2 {
    cursor: pointer;
    font-size: 16px;
    color: #666666;
  }
  .imessagesmiantilte2:hover {
    color: #1a5bb0;
  }
  .zddiv .arco-table-td {
    border-bottom: none !important;
    margin: 10px 0 !important;
  }
  .imessagesitembox {
    width: 100%;
    min-height: 97px;
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
  }
  .imessagesitemicon {
    margin: 0px 10px;
    position: relative;
  }
  .imessagesitemicon img {
    height: 42px;
    width: 42px;
  }
  .imessagesitemiconstatus {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e53737;
    position: absolute;
    top: 5px;
    right: 5px;
  }
  .imessagesitemdesbox {
    display: flex;
    flex-direction: column;
  }
  .imessagesitemdestitle {
    color: #000000;
    font-size: 20px;
    display: flex;
    align-items: center;
  }
  .imessagesitemdestitle1 {
    color: #999999;
    font-size: 14px;
    margin-left: 10px;
  }
  .imessagesitemdesmain {
    color: #666666;
    font-size: 18px;
    width: 978px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 25px;
  }
  .imessagesitemdesmains {
    color: #666666;
    font-size: 18px;
    width: 978px;
    min-height: 25px;
  }
  /* .imessagesitemdesmains textarea {
    width: 980px;
    height: 400px;
  } */
  .auto-resize {
    width: 980px;
    overflow: hidden;
    resize: none;
    min-height: 25px;
    max-height: 400px;
    font-size: 18px;
    background-color: transparent;
    border: none;
  }

  .imessagesitemdesmains textarea:disabled {
    background-color: transparent;
  }

  .imessagesitemoptionbox {
    display: flex;
    padding-left: 150px;
  }
  .imessagexq {
    color: #1e467b;
    font-size: 20px;
    cursor: pointer;
    margin: 0px 40px;
  }
  .imessagexq:hover {
    color: #1a5bb0;
  }
  .imessagexq img {
    height: 16px;
    width: 16px;
  }
  .imessagexqs img {
    transform: scaleY(-1);
  }
  .imessagexdel {
    color: #666666;
    font-size: 20px;
    cursor: pointer;
    margin: 0px 40px;
    display: flex;
    align-items: center;
  }
  .imessagexdel:hover {
    color: #1a5bb0;
  }
  .imessagexdel img {
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }
</style>
